<!DOCTYPE html>
<html>
<head>
    {include file="common/meta" /}
    <link href="__CDN__/assets/css/user.css?v={$Think.config.site.version}" rel="stylesheet">
    <style>
        .block1{border-left: 5px solid #0d6aad; height: auto;}
        .block1 p{ font-size: 12px;
            height: auto;
            white-space: normal; /* 允许单元格内容换行 */
            max-width: 100%; /* 或者根据需要设置最大宽度 */
            word-wrap: break-word; /* 强制换行 */
        }
        .block2{border-left: 5px solid #9f191f; height: auto;}
        .block2 p{ font-size: 12px;
            height: auto;
            white-space: normal; /* 允许单元格内容换行 */
            max-width: 100%; /* 或者根据需要设置最大宽度 */
            word-wrap: break-word; /* 强制换行 */
        }
        .video-js{ margin: 10px auto;}
    </style>
</head>

<body>


<main class="content">

    <div class="panel panel-default">
        <div class="panel-heading">{$live.title}({$live.stream})-直播</div>
        <div class="panel-body">

            <video id="video" controls width="100%" height="360"></video>
            <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
            <script>
                if(Hls.isSupported()) {
                    var video = document.getElementById('video');
                    var hls = new Hls();
                    hls.loadSource("{$live.hls_play_url}?auth_key={$live.play_auth_key}}");
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                        video.play();
                    });
                }
            </script>

            <div class="status">
                {switch $live.status}
                {case normal}
                <span class="label label-success">状态:正常</span>
                {/case}
                {case hidden}
                <span class="label label-default">状态:关闭</span>
                {/case}
                {/switch}

                {switch $live.live_status}
                {case 0}
                <span class="label label-warning">待直播</span>
                {/case}
                {case 1}
                <span class="label label-success">直播中</span>
                {/case}
                {default /}
                <span class="label label-danger">已下播</span>
                {/switch}



                <span class="label" style="color:#999999;">创建时间:{$live.create_time}</span>

            </div>


        </div>
    </div>

</main>


<script src="https://vjs.zencdn.net/8.22.0/video.min.js"></script>
{include file="common/script" /}

</body>

</html>


